<template>
    <div>
        <div class="banner">
            <img src="@/assets/images/index/banner.jpg" alt="" srcset="">
        </div>
        <div class="content">
            <div class="title">
                <span class="title-name">新闻</span>
                <span class="title-englishname">NEWS</span>
            </div>
            <ul>
                <li v-for="(item, index) in resources" :key="index">
                    <span class="li-date">
                        新闻|{{item.date}}
                    </span>
                    <span class="li-title">
                        {{item.title}}
                    </span>
                    <span class="li-banner">
                        {{item.banner}}
                    </span>
                    <ul class="imgs">
                        <li>
                            <img :src="item.imgs.one" alt="">
                        </li>
                        <li>
                            <img :src="item.imgs.two" alt="">
                        </li>
                        <li>
                            <img :src="item.imgs.three" alt="">
                        </li>
                        <li>
                            <img :src="item.imgs.four" alt="">
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="page">
            <a href="">首页</a>
            <a href="">1</a>
            <a href="">>></a>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                resources: [{
                    date: '2019年5月26号',
                    title: '阳光前端1905开班仪式',
                    banner: '昨天，阳光学院前端项目实践班正式开班，开班班会由我司人力资源市场总监潘总监给大家进行了在整个项目实践过程中注意事项，以及工作室的规则制度流程，包括后续的职业规划问题等；班会讲解完成后，大家耶进行了踊跃的发言，最后我们的小鲜肉范老师进行项目的讲解，范老师以严谨而又风趣幽默的形式将大家带入到项目中，在项目的难点部分范工程师对大家进行了讲解，阳光的学员们对范工程师的技术非常的认可，希望大家在后续的项目中保持现在的热情到项目结束，您将有更大的收获和感悟。',
                    imgs: {
                        one: require('@/assets/images/news/1_1.png'),
                        two: require('@/assets/images/news/1_2.png'),
                        three: require('@/assets/images/news/1_3.png'),
                        four: require('@/assets/images/news/1_4.png'),
                    },
                }, {
                    date: '2019年5月23号',
                    title: '公司邀农林大学领导参观物联网实验室',
                    banner: '5月23日，我司邀农林大学：吴书记、艺术系主任陈主任、信息计算机系主任程主任及人文社科系主任王主任，莅临参观位于马尾区的物联网实验室，物联网实验室的负责人刘部长为大家进行了解说，解说结束后大家到会议室进行了热烈的讨论，同时我司潘总也为到来的校领导进行学术上的交流与沟通，本次参过农林大学的各位领导都觉的这是一件非常有意义的事情，希望今后我司多多与院校开展此类合作活动，可带领更多的在校学生了解目前先进技术，为后续的工作打下坚实的基础。',
                    imgs: {
                        one: require('@/assets/images/news/2_1.png'),
                        two: require('@/assets/images/news/2_2.png'),
                        three: require('@/assets/images/news/2_3.png'),
                        four: require('@/assets/images/news/2_4.png'),
                    },
                }, {
                    date: '2019年5月12号',
                    title: '中青Java大数据1905开班仪式',
                    banner: '今天，中青Java大数据班正式开班，开班班会由人力资源市场总监潘总监给大家进行了开班仪式，其中告知在学习过程中的规则制度，及后期的职业规划问题等；班会结束后，由我们有10年授课经验参与过省内多个大型项目的翁工给大家进行授课，翁工课程讲解通俗易懂，生动有趣；过往学员对翁工认可度极高，其中就有一些学员是冲着翁工而来的，希望大家在后学的学习过程中要持之以恒，保持住学习的热情，为自己的技术打下坚实的基础，加油吧，少年！',
                    imgs: {
                        one: require('@/assets/images/news/3_1.png'),
                        two: require('@/assets/images/news/3_2.png'),
                        three: require('@/assets/images/news/3_3.png')
                    },
                }, ]
            }
        }
    }
</script>

<style scoped>
    img {
        max-width: 100%;
    }

    * {
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
    }

    .m-r {
        margin-right: 53px;
    }

    .m-b {
        margin-top: 38px;
    }

    .content {
        padding: 51px 0 0px 0;
        box-sizing: border-box;
    }

    .content .title {
        width: 1205px;
        margin: 0 auto;
    }

    .content .title .title-name {
        width: 100%;
        font-size: 40px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        display: block;
        margin-bottom: 16px;
        padding: 0 7px;
        box-sizing: border-box;
    }

    .content .title .title-englishname {
        width: 100%;
        font-size: 20px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(0, 144, 255, 1);
        display: block;
        padding: 0 20px 52px 20px;
        box-sizing: border-box;
        border-bottom: 2px solid #0090ff;
    }

    .content ul {
        width: 1203px;
        margin: 0 auto;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .content ul li .li-date {
        width: 100%;
        display: flex;
        font-size: 24px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        padding: 65px 40px 0 40px;
        text-align: left;
    }

    .content ul li .li-title {
        width: 100%;
        display: flex;
        font-size: 46px;
        font-family: MicrosoftYaHei-Bold;
        font-weight: bold;
        color: rgba(29, 29, 29, 1);
        text-align: left;
        padding: 40px 35px 70px 35px;
    }

    .content ul li .li-banner {
        width: 100%;
        display: flex;
        padding: 0 30px;
        font-size: 24px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 41px;
        text-align: left;
    }

    .content ul li .imgs {
        width: 100%;
        display: flex;
        padding: 53px 0 46px 0;
        border-bottom: 1px dashed rgba(191, 191, 191, 1);
    }

    .page{
        display: flex;
        justify-content: center;
        padding: 77px 0 91px 0
    }
    .page a{
        font-size: 18px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(38, 153, 255, 1);
        line-height: 20px;
        text-decoration: none;
        margin-right: 25px
    }

    .page a:last-of-type{
        margin-right: 0px;
    }

    @media screen and (max-width: 480px) {
        .m-r {
            margin-right: 0px;
        }

        .content ul {
            width: 100%;
            margin: 0;
        }

        .content .title{
            width: 100%;
        }
        .content ul li {
            width: 100%;
        }

        .content ul li p {
            width: 100%;
            height: 100%;
            margin-bottom: 38px;
        }
    }
</style>